<template>
  <div class="village_detail" v-if="flag">
    <head-top goBack="true" head-title="通知公告"></head-top>
    <div class="top-title">
      <div class="title border-bottom">{{detail.title}}</div>
      <div class="desc">
        <span class="author">作者：{{detail.author}}</span>&nbsp;
        <span class="amount">浏览量：{{detail.reading_amount}}</span>&nbsp;
        <span class="time">{{detail.created_at*1000 |dateFmt(('YYYY-MM-DD'))}}</span>
      </div>
      <!--<mt-button type="primary" @click="downLoad(detail.id)">下载</mt-button>-->
      <mt-button v-if="detail.file_url!=='' && androidPdf && detail.file_url" type="primary" @click="goPDF">查看文件</mt-button>
      <mt-button v-if="detail.file_url!=='' && iosPDf && detail.file_url" type="primary" @click="goIosPDF(detail.file_url)">查看文件</mt-button>
    </div>
    <p v-html="detail.content" ref="box" class="content"></p>
    <!--评论展示-->
    <div class="comment-all" v-if="detaile.length!==0">
      <div class="comment-title">
        <span>评论区</span>
        <span>评论({{detaile.length}})</span>
      </div>
      <div class="content-content">
        <ul>
          <li v-for="(com,index) in detaile" :key="index">
            <div class="comment-user">
              <img :src="com.avatar" alt="">
              <div class="com-name">
                <h3>{{com.nickname}}</h3>
                <h4>{{com.created_at}}</h4>
              </div>
            </div>
            <div class="comment-des">
              <p>{{com.content}}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!--评论区-->
    <div class="comment-footer" v-if="detail.is_comment">
      <div class="icon" v-if="conmentShow" @click="comBtn()">
        <img src="./images/pinglun@2x.png" alt="">
        <span>评论</span>
      </div>
      <div class="input-box" v-if="inputShow">
        <input type="text" v-model="text" placeholder="请输入评论" maxlength="150">
        <button @click="sendBtn()">发送</button>
      </div>
    </div>
    <!--pdf显示-->
    <div v-if="pdfShow" style="position: absolute;top: 40px;left: 0;z-index: 2;width: 100%;overflow: auto;-webkit-overflow-scrolling:touch;">
      <span style="position: fixed;color: white;font-size: 15px;padding: 20px" @click="closePDF">关闭弹窗</span>
      <!--<iframe src="https://abc.wykbw.com/cspdf.pdf" style=" overflow: scroll;-webkit-overflow-scrolling: touch;width: 1px; min-width: 100%; *width: 100%;" width="100%" height="680" scrolling="no" frameborder="0"></iframe>-->
      <iframe :src="detail.file_url" style=" overflow: scroll;-webkit-overflow-scrolling: touch;width: 1px; min-width: 100%; *width: 100%;" width="100%" height="680" scrolling="no" frameborder="0"></iframe>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  p {
    margin: 8px !important;
  }

  .village_detail {
    line-height: normal;
    background-color: #fff;
    overflow: auto;
    height: 100%;
    .mint-button {
      font-size: 12px;
      height: 25px;
      margin-top: 5px;
    }
    .content {
      padding: 0 2px;
      margin-top: 8px;
    }
    .top-title {
      margin: 40px 10px 0px 10px;
      .title {
        padding: 10px 0;
        text-align: center;
        font-size: 18px;
        line-height: 20px;
        font-weight: 700;
      }
      .desc {
        padding-top: 10px;
        color: #666;
        font-size: 12px;
      }
    }
    /*评论样式*/
    .comment-all {
      width: 100%;
      padding: 10px 0 40px 0;
      .comment-title {
        padding: 10px;
        background: #f2f2f2;
        justify-content: space-between;
        display: flex;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        align-items: center;
        span {
          color: #666;
          font-size: 14px;
        }
      }
      .content-content {
        padding: 10px;
        ul {
          li {
            border-bottom: 1px solid #d9d9d9;
            padding: 10px 0;
            .comment-user {
              display: flex;
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              align-items: center;
              img {
                width: 40px;
                border-radius: 50%;
              }
              .com-name {
                padding-left: 10px;
                h3 {
                  font-size: 15px;
                  line-height: 26px;
                }
                h4 {
                  font-size: 12px;
                  color: #999;
                }
                h3, h4 {
                  font-weight: normal;
                }
              }
            }
            .comment-des {
              padding-left: 40px;
              p {
                font-size: 15px;
                color: #333;
              }
            }
          }
        }
      }
    }
    .comment-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 60px;
      background: #2585d0;
      .icon {
        width: 100%;
        text-align: center;
        height: 40px;
        img {
          width: 20px;
        }
        span {
          color: #fff;
          font-size: 15px;
          line-height: 40px;
          margin-left: 10px;
        }
      }
      .input-box {
        width: 100%;
        height: 40px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 70%;
          height: 30px;
          background: #f2f2f2;
          outline: none;
          border: none;
          border-radius: 5px;
          padding-left: 5px;
          margin-left: 5px;
        }
        button {
          width: 70px;
          height: 30px;
          color: #2585d0;
          outline: none;
          margin-right: 10px;
          background: #fff;
        }
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import commonUrl from '../../common/js/commonUrl.js'
  import wx from 'weixin-js-sdk'
  import { getConfig, senNoticeComment, noticeComment } from '../../api/homeLogin'
  import { Toast } from 'mint-ui'
  import { loadTitle, loadUserId } from '../../common/js/cache'
  import { IsWeiXin } from '../../common/js/isWeiXin'
  import {getNewDetailData} from '../../api/MyIdent'

  export default {
    name: 'VillageDetail',
    data () {
      return {
        detail: {},
        img: [],
        flag: false,
        articleId: '', // 文章id
        articleTitle: '',
        conmentShow: true,
        inputShow: false,
        text: '',
        commentList: [],
        pdfShow: false, // 控制PDF是否显示
        iosPDf: false, // iOS显示PDF方式
        androidPdf: false, // 安卓显示PDF
        newold: '' // 判断新老版本
      }
    },
    created () {
      this.whetherIos() // 判断是安卓还是iOS
      this.articleId = this.$route.params.id
      console.log(this.$route.params)
      this.newold = this.$route.params.newold
      if (this.newold === 'voting') { // 新版本数据
        this._getNewDetailData()
      } else {
        this.getDetailData()
      }

      if (loadUserId()) {
        this._shareNotice()
      } else {
        this.$router.push('/Login')
      }
      // 获取富文本里p标签里面的img标签
      setTimeout(() => {
        if (document.getElementsByClassName('content')[0]) {
          let imgbox = document.getElementsByClassName('content')[0].getElementsByTagName('img')
          // console.log(imgbox)
          var _this = this
          for (let i = 0; i < imgbox.length; i++) {
            this.img.push(imgbox[i].src)
            // 判断是否是微信浏览器而实现不同的图片预览
            // console.log(this.img)
            if (IsWeiXin()) {
              imgbox[i].addEventListener('click', function () {
                // console.log(imgbox[i].src)
                wx.previewImage({
                  current: imgbox[i].src, // 当前显示图片的http链接
                  urls: _this.img // 需要预览的图片http链接列表
                })
              })
            } else {
              // 如果图片是异步生成，在图片数据更新后调用
              this.$previewRefresh()
              imgbox[i].setAttribute('preview', 1)
            }
          }
        }
      }, 1000)
      this._noticeComment()
    },
    methods: {
      whetherIos() {
        const u = navigator.userAgent
        const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        if (isiOS) {
          this.iosPDf = true
          this.androidPdf = false
          // Toast({
          //   message: 'IOS',
          //   position: 'middle',
          //   duration: 1500
          // })
        } else {
          this.iosPDf = false
          this.androidPdf = true
          // Toast({
          //   message: '安卓',
          //   position: 'middle',
          //   duration: 1500
          // })
        }
      },
      // 老版公告详情
      getDetailData () {
        const url = commonUrl.apihost + 'index.php/home/article/artDetail/?id=' + this.$route.params.id
        this.$http.get(url).then(res => {
          if (res.data.code === 200) {
            this.detail = res.data.data
            this.articleTitle = this.detail.title
            this.flag = true
          }
        })
      },
      // 新版公告详情
      _getNewDetailData() {
        getNewDetailData(this.$route.params.id).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.detail = res.data
            this.articleTitle = this.detail.title
            this.flag = true
          }
        })
      },
      downLoad (id) {
        window.location = `${commonUrl.apihost}index.php/home/article/downloadArticle?id=${id}`
      },
      // 查看PDF事件（IOS）
      goIosPDF (url) {
        window.open(url)
      },
      // 查看PDF事件(安卓)
      goPDF() {
        this.pdfShow = true
      },
      // 关闭PDF
      closePDF() {
        this.pdfShow = false
      },
      // 分享
      _shareNotice () {
        getConfig().then(res => {
          if (res.code === 200) {
            wx.config({
              debug: false,
              appId: res.data.appId,
              nonceStr: res.data.nonceStr,
              rawString: res.data.rawString,
              signature: res.data.signature,
              timestamp: res.data.timestamp,
              jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'onMenuShareQZone'
              ]
            })
          }
        })
        var that = this
        wx.ready(() => {
          setTimeout(function () {
            var params = {
              title: loadTitle(), // 分享标题
              desc: that.articleTitle,
              link: `${commonUrl.apihost}home/VillageDetail/${that.articleId}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://pic.yzptzx.cn/forum/20180820171242_15347563625b7a860a349a0', // 分享图标
              success: function () {
              },
              cancel: function () {
              }
            }
            wx.onMenuShareTimeline(params)
            wx.onMenuShareAppMessage(params)
            wx.onMenuShareQQ(params)
            wx.onMenuShareWeibo(params)
            wx.onMenuShareQZone(params)
          }, 1000)
        })
      },
      // 评论按钮
      comBtn () {
        this.conmentShow = false
        this.inputShow = true
      },
      // 发送评论
      sendBtn () {
        if (!this.text) {
          Toast({
            message: '请输入评论的内容',
            position: 'middle',
            duration: 1500
          })
          return false
        }
        senNoticeComment(this.text, this.articleId).then(res => {
          // console.log(res)
          if (res.code === 200) {
            Toast({
              message: '评论成功',
              position: 'middle',
              duration: 1500
            })
            this.text = ''
            this.conmentShow = true
            this.inputShow = false
            this._noticeComment() // 刷新评论
          }
          if (res.code === 400) {
            Toast({
              message: '评论失败',
              position: 'middle',
              duration: 1500
            })
            return false
          }
        })
      },
      //  评论展示
      _noticeComment () {
        noticeComment(this.articleId).then(res => {
          if (res.code === 200) {
            this.commentList = res.data
            // console.log(this.commentList)
          }
        })
      }
    },
    computed: {
      detaile () {
        // 使最新评论的评论显示在最前面
        return this.commentList.reverse()
      }
    },
    components: {
      headTop
    }
  }
</script>
